<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品列表页</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">-->
</head>
<body>

<div id="top"></div>
<!--<div id="second">-->
<!--    <span id="goodsType"></span>-->
<!--    <form class="form-inline pull-right" style="margin-top: 10px;margin-right: 10px;text-align: right">-->
<!--        <div class="form-group">-->
<!--            <input type="search" id="search" placeholder="搜索一下好东西...">-->
<!--            <button type="submit" id="searchBtn">搜索</button>-->
<!--        </div>-->
<!--    </form>-->
<!--</div>-->

<div>
    <div class="panel-heading" style="margin-top: 5%;margin-left: 2%">
        <h3 class="panel-title">
            <span class="glyphicon glyphicon-th-list"></span>&nbsp;&nbsp;商品列表
            <select id="selectList">
                <option value="1">订单数</option>
                <option value="2">评分</option>
            </select>
        </h3>

    </div>
    <div class="panel-body">
        <!--列表开始-->
        <div class="row" style="margin: 0 auto;"></div>
        <center>
        <nav aria-label="Page navigation" style="position: center;">
            <ul class="pagination">
                <li id="leftMove" class="pageCount">
                    <a href="javascript:void(0)" data-url="" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <!-- 循环开始 -->
                <li class="page"></li>
                <!-- 循环结束 -->
                <li id="rightMove" class="pageCount">
                    <a href="javascript:void(0)" data-url="" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        </center>
        </div>
</div>

<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--页面加载所需的数据js代码-->
<script type="text/javascript">
    $(function () {
        $("#top").load("top.html")
        const searchParams = new URLSearchParams(location.search);
        // 获取商品分类id
        const tId = searchParams.get("tId");
        //获取商品名称
        const name = searchParams.get("name");
        //获取商品展示方式(订单数/评分)
        let selectedValue = $("#selectList").val()
        showPages(selectedValue)
        $('#selectList').on('change', function() {
            let selectedValue = $(this).val(); // 获取选中的选项的值
            showPages(selectedValue)
        });


        function showPages(selectedValue){
            //根据搜索输入查询数据
            if(name!=null){
                $.ajax({
                    url: "/PDD/product?method=show",
                    data:{
                        "pName":name,
                        "orderBy":selectedValue
                    },
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        //页码加载
                        let html = '';
                        for (let i = 1; i <= data.totalPage; i++) {
                            let url = "/PDD/product?method=show&pName=" + name + "&currentPage=" + i + "&orderBy="+selectedValue+"";
                            html += `<a class="pageCount" href="javascript:void(0)" data-url="${url}">${i}</a>`;
                            html += `</li>`;
                        }
                        $(".page").html(html);
                        //展示商品
                        showProducts()
                        //默认展示第一页的商品
                        $(".pageCount").eq(1).click()
                    },
                });
                //根据商品类型查询
            } else if(tId!=null) {
                $.ajax({
                    url: "/PDD/product?method=show",
                    data:{
                        "tId":tId,
                        "orderBy":selectedValue
                    },
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        //页码加载
                        let html = '';
                        for (let i = 1; i <= data.totalPage; i++) {
                            let url = "/PDD/product?method=show&tId=" + data.list[0].tId + "&currentPage=" + i + "&orderBy="+selectedValue+"";
                            html += `<a class="pageCount" href="javascript:void(0)" data-url="${url}">${i}</a>`;
                            html += `</li>`;
                        }
                        $(".page").html(html);
                        //展示商品
                        showProducts()
                        //默认展示第一页的商品
                        $(".pageCount").eq(1).click()
                    },
                });
            }
        }
    })
</script>
<!--页码及商品展示的js代码-->
<script>
    function showProducts() {
        $(".pageCount").each(function () {
            $(this).click(function () {
                $.ajax({
                    url: $(this).attr('data-url'),
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        // 渲染商品列表
                        let productList = data.list;
                        let html = ''
                        for (let i in productList) {
                            let product = productList[i]
                            html += `
<div class="col-sm-3" style="text-align: center;width: 240px;height: 320px;">
  <div class="thumbnail">
    <img src="image/${product.pImage}" class="pImage" width="180" height="180" alt="商品图片"/>
    <div class="caption">
      <h5 class="pName">商品名称:<a class="productId" href="/PDD/goodsDetail.html?pId=${product.pId}">${product.pName}</a></h5>
      <p class="sales">销量：${product.sales}件</p>
      <p class="sales">评分：${product.pScore.toFixed(2)}</p>
      <p style="color:orange" class="price">价格：${product.price.toFixed(2)}元</p>
    </div>
  </div>
</div>`;
                        }
                        // 将商品信息拼接到页面中
                        $('.row').html(html);
                    }
                })
            })
        })
    }
</script>
</body>
</html>